<template>
  <div>
    <a-drawer width="30%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
      <a-divider orientation="left">
        <b>{{ formTitle }}</b>
      </a-divider>
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="产品编号" prop="productCode">
          <a-input v-model="form.productCode" placeholder="请输入" @blur="checkSameProductCode" />
        </a-form-model-item>
        <a-form-model-item label="产品名称" prop="productName">
          <a-input v-model="form.productName" placeholder="请输入" @blur="checkSameProductName" />
        </a-form-model-item>
        <a-form-model-item label="产品类型" prop="productType">
          <a-select
            v-model="form.productType"
            placeholder="请选择类型"
            style="width: 100%"
            allow-clear
            optionFilterProp="label"
          >
            <a-select-option
              :label="p.dictLabel"
              v-for="(p, index) in productTypes"
              :key="index"
              :value="p.dictValue"
            >{{ p.dictLabel }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :label="form.productType === '0' ? '成品' : '数量'"
          prop="finished"
          :style="{ display: 'inline-block', width: 'calc(33% - 12px)' }"
        >
          <a-input-number v-model="form.finished" v-decorator="['input-number']" :min="0" />
        </a-form-model-item>
        <template v-if="form.productType === '0'">
          <a-form-model-item
            label="半成品"
            prop="partially"
            :style="{ display: 'inline-block', width: 'calc(33% - 12px)' }"
          >
            <a-input-number v-model="form.partially" v-decorator="['input-number']" :min="0" />
          </a-form-model-item>
          <a-form-model-item
            label="废品"
            prop="fail"
            :style="{ display: 'inline-block', width: 'calc(33% - 12px)' }"
          >
            <a-input-number v-model="form.fail" v-decorator="['input-number']" :min="0" />
          </a-form-model-item>
        </template>
        <a-form-model-item label="产品材料" prop="material">
          <a-input v-model="form.material" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-input v-model="form.remark" placeholder="请输入" type="textarea" allow-clear />
        </a-form-model-item>
        <div class="bottom-control">
          <a-space>
            <a-button type="primary" @click="submitForm">保存</a-button>
            <a-button type="dashed" @click="cancel">取消</a-button>
          </a-space>
        </div>
      </a-form-model>
    </a-drawer>
    <a-modal :title="sameType" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <p>是否需要自动修改</p>
    </a-modal>
  </div>
</template>

<script>
import { addProduct, checkProductCode, checkProductName, getProduct, updateProduct } from '@/api/erp/product'

export default {
  name: 'CreateForm',
  data () {
    return {
      open: false,
      formTitle: '',
      form: {
        productCode: undefined,
        productName: undefined,
        productType: undefined,
        material: undefined,
        finished: undefined,
        partially: undefined,
        fail: undefined,
        remark: undefined
      },
      rules: {
        productCode: [
          { required: true, message: '产品编号不能为空', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '产品名字不能为空', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '产品类型不能为空', trigger: 'blur' }
        ]
      },
      // 产品类型
      productTypes: [],
      visible: false,
      sameType: ''
    }
  },
  created () {
    this.getDicts('xzg_product_type').then(response => {
      this.productTypes = response.data
    })
  },
  methods: {
    onClose () {
      this.open = false
    },
    /** 添加按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.formTitle = '添加产品信息'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      const productId = row ? row.productId : ids
      getProduct(productId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改产品信息'
      })
    },
    reset () {
      this.form = {
        productCode: undefined,
        productName: undefined,
        productType: undefined,
        material: undefined,
        finished: undefined,
        partially: undefined,
        fail: undefined,
        remark: undefined
      }
    },
    checkSameProductCode (e) {
      const query = {
        productId: this.form.productId,
        productCode: this.form.productCode
      }
      checkProductCode(query).then(response => {
        if (response.data) {
          this.visible = true
          this.sameType = '产品编号已存在'
        }
      })
    },
    checkSameProductName (e) {
      const query = {
        productId: this.form.productId,
        productName: this.form.productName
      }
      checkProductName(query).then(response => {
        if (response.data) {
          this.visible = true
          this.sameType = '产品名称已存在'
        }
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.productId !== undefined) {
            updateProduct(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addProduct(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          }
        }
      })
    },
    cancel () {
      this.open = false
      this.reset()
    },
    handleOk (e) {
      var date = new Date()
      if (this.sameType === '产品编号已存在') {
        this.form.productCode = this.form.productCode + '-' + date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
      } else {
        this.form.productName = this.form.productName + '-' + date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
      }
      this.visible = false
    },
    handleCancel (e) {
      if (this.sameType === '产品编号已存在') {
        this.form.productCode = undefined
      } else {
        this.form.productName = undefined
      }
      this.visible = false
    }
  }
}
</script>
